<template>
  <div class="shop-detail">
    <div class="container">
      <div class="info-title">商户详情</div>
      <div class="shop-info" v-loading="loading">
        <div class="shop_register_name">
          <span v-html="shopInfo.shopRegisterName || 'null'"></span>
          <div>
            <el-button type="text" @click="subbranchInfo">门店信息</el-button>
            <el-button type="text" @click="updateInfo">修改</el-button>
          </div>
        </div>
        <el-row :gutter="10" v-if="!loading">
          <el-col :sm="8">
            <div class="grid-content">
              <div class="info-cell">
                <span class="info-label">商户号：</span>
                <span v-html="shopId"></span>
              </div>
              <div class="info-cell">
                <span class="info-label">注册名称：</span>
                <span v-html="shopInfo.shopRegisterName || '未设置'"></span>
              </div>
              <div class="info-cell">
                <span class="info-label">支付宝账户：</span>
                <span v-html="shopInfo.alipayAccount || '未设置'"></span>
              </div>

              <div class="info-cell">
                <span class="info-label">行业类别：</span>
                <span v-html="shopInfo.industryCategory || '未设置'"></span>
              </div>
              <div class="info-cell">
                <span class="info-label">营业执照号：</span>
                <span v-html="shopInfo.shopIdNumber || '未设置'"></span>
              </div>
            </div>
          </el-col>
          <el-col :sm="8">
            <div class="grid-content">
              <div class="info-cell">
                <span class="info-label">商户联系人：</span>
                <span v-html="shopInfo.shopUserName || '未设置'"></span>
              </div>
              <div class="info-cell">
                <span class="info-label">联系人电话：</span>
                <span v-html="shopInfo.shopUserPhone || '未设置'"></span>
              </div>
              <div class="info-cell">
                <span class="info-label">联系人邮箱：</span>
                <span v-html="shopInfo.shopUserEmail || '未设置'"></span>
              </div>
              <div class="info-cell">
                <span class="info-label">客服电话：</span>
                <span v-html="shopInfo.shopCustomerPhone || '未设置'"></span>
              </div>
              <div class="info-cell">
                <span class="info-label">商户地址：</span>
                <span v-html="shopInfo.shopAddress || '未设置'"></span>
              </div>
              <div class="info-cell">
                <span class="info-label">证件类型：</span>
                <span>身份证</span>
              </div>
              <div class="info-cell">
                <span class="info-label">证件号码：</span>
                <span v-html="shopInfo.legalIdNumber || '未设置'"></span>
              </div>
            </div>
          </el-col>
          <el-col :sm="8">
            <div class="grid-content">
              <div class="info-cell">
                <span class="info-label">开 户 名：</span>
                <span v-html="shopInfo.settleAccountName || '未设置'"></span>
              </div>
              <div class="info-cell">
                <span class="info-label">账户性质：</span>
                <span v-html="shopType[shopInfo.settleAccountType] || '未设置'"></span>
              </div>
              <div class="info-cell">
                <span class="info-label">开户账号：</span>
                <span v-html="shopInfo.settleAccountNumber || '未设置'"></span>
              </div>
              <div class="info-cell">
                <span class="info-label">银行预留号码：</span>
                <span v-html="shopInfo.bankPhone || '未设置'"></span>
              </div>
              <div class="info-cell">
                <span class="info-label">开 户 行：</span>
                <span v-html="shopInfo.settleBank || '未设置'"></span>
              </div>
              <div class="info-cell">
                <span class="info-label">开户支行：</span>
                <span v-html="shopInfo.settleBranchBank || '未设置'"></span>
              </div>

              <div class="info-cell">
                <el-button @click="handleUpdateChannelPic" type="text">通道证照预览补充补充</el-button>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="config">
        <div class="payment-config">
          <div class="config-title">支付配置</div>
          <div class="config-list">
            <div
              class="config-cell"
              @click="handleConfig(cell)"
              v-for="(cell,index) in configList"
              :key="index"
            >
              <i class="icon-config" :class="cell.type"></i>
              <span v-html="cell.name"></span>
            </div>
          </div>
        </div>
        <!-- <div class="shop-config">
          <div class="config-title">商户配置</div>
          <div class="config-list">
            <el-button @click="getTerminal" type="text">终端管理</el-button>
          </div>
        </div> -->
      </div>
    </div>

    <!-- 商户信息修改 -->
    <el-dialog title="商户信息修改" width="800px"  :visible.sync="updateShopinfo">
      <div class="update-box">
        <update-shopinfo :shopInfo="shopInfo" @close-box="handleCancelUpdate"></update-shopinfo>
      </div>
    </el-dialog>
    <!-- 商户通道信息补全 -->
    <el-dialog title="商户通道信息补充" width="800px" :visible.sync="perfectChannelPic">
      <div class="update-box">
        <UpdateShopChannelInfo
          :defaultInfo="shopInfo"
          @close-box="perfectChannelPic = false"
          :userId="shopInfo.userId"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import UpdateShopinfo from "./temp/updateShopinfo";
import UpdateShopChannelInfo from "./temp/updateShopChannelInfo.vue";
export default {
  name: "shop-detail",
  data() {
    return {
      perfectChannelPic: false,
      updateShopinfo: false,
      shopId: null,
      shopInfo: {
        shopRegisterName: null,
        shopUserPhone: null
      },
      loading: true,
      shopType: ["", "对公账户", "对私账户"],
      configList: [
        {
          name: "微信支付",
          type: "wechat"
        },
        {
          name: "支付宝支付",
          type: "alipay"
        }
        // {
        //     name:"智能pos机",
        //     type:"pos"
        // }
      ]
    };
  },
  components: { UpdateShopinfo, UpdateShopChannelInfo },
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    init() {
      this.loading = true;
      this.shopId = this.$route.params.shopId;
      let token = sessionStorage.getItem(1);
      let url = `user/shop/find/${token}`;
      let params = `roleId=1&shopId=${this.shopId}`;
      this.$Http
        .post(url, params)
        .then(res => {
          this.loading = false;
          if (res.data.resp_code === "000000") {
            if(Object.keys(res.data.result.content)!==0){
              this.shopInfo = res.data.result.content[0];
            }else{
              this.$message.warning("未找到商户：" + this.shopId);
            }
          } else {
            this.$message(res.data.resp_message);
          }
        })
        .catch(err => {
          this.loading = false;
          this.$message("获取商户信息失败！");
        });
    },
    handleCancelUpdate() {
      this.updateShopinfo = false;
      this.init();
    },
    subbranchInfo() {
      let s = this.$route.params.shopId;
      this.$router.push({
        name: "subbranchDetail",
        params: {
          shopId: s
        }
      });
    },
    getTerminal() {
      this.$router.push({
        name: "terminalManage",
        params: {
          shopId: this.shopId
        }
      });
    },
    handleUpdateChannelPic() {
      this.perfectChannelPic = true;
    },
    handleConfig(cell) {
      // ...
      this.$router.push({
        name: "shopConfig",
        params: {
          type: cell.type,
          shopId: this.shopId
        }
      });
    },
    submitUpdatePic() {
      let token = sessionStorage.getItem(1);
      let url = `user/shop/update/${token}`;
      let picList = [
        "businessPic",
        "legalIdPic",
        "legalIdBackPic",
        "shopHeadPic",
        "firstPic",
        "accountPic",
        "bankFrontPic",
        "bankReversePic",
        "mchScenePic"
      ];
      let params = `id=${this.shopInfo.id}&relationshipPic=${
        this.shopInfo.relationshipPic
      }&merchantPic=${this.shopInfo.merchantPic}`;

      for (let key in picList) {
        params =
          params + "&" + picList[key] + "=" + this.shopInfo[picList[key]];
      }

      this.$Http
        .post(url, params)
        .then(res => {
          this.perfectPic = false;
        })
        .catch(err => {
          this.$notify({
            title: "出错啦",
            message: "修改商户信息图片失败！",
            type: "warning"
          });
        });
    },
    handleAvatarSuccess(type, res) {
      if (res.data.resp_code === "000000") {
        this.shopInfo[type] = res.data.result;
        console.log(this.shopInfo);
      } else {
        this.$notify({
          title: "提示",
          message: res.data.resp_message,
          type: "warning"
        });
      }
    },

    updateInfo() {
      this.updateShopinfo = true;
    }
  }
};
</script>
<style scoped>
.shop-detail {
  box-sizing: border-box;
  padding: 20px;
}
.container {
  border: 1px solid #ededed;
}
.info-title {
  height: 50px;
  line-height: 50px;
  font-size: 26px;
  color: #409eff;
  padding: 5px 20px;
  border-bottom: 1px solid #ededed;
}
.shop-info {
  padding: 20px;
  box-sizing: border-box;
  border-bottom: 1px solid #dbdbdb;
}
.shop_register_name {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  font-size: 20px;
  border-bottom: 1px solid #f5f5f5;
}
.info-cell {
  padding: 5px;
}
.config {
  padding: 20px;
}
.config-title {
  font-size: 16px;
  height: 35px;
  line-height: 35px;
  border-left: 2px solid #dbdbdb;
  padding-left: 30px;
}
.config-list {
  padding: 20px;
}
.pic-box,
.pic-prefect-box {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  flex-direction: column;
  width: 178px;
  height: 178px;
  padding: 0 20px 20px;
}
.pic-box > img {
  height: 150px;
}
.pic-box > img:hover {
  transform: scale(3);
  border: 1px solid #aaaaaa;
  background-color: rgba(0, 0, 0, 0.2);
}
.pic-preview,
.pic-perfect {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.upload-file {
  width: 178px;
  height: 150px;
  box-sizing: border-box;
  display: inline-block;
  overflow: visible;
}
.upload-file > img:hover {
  transform: scale(3);
  border: 1px solid #aaaaaa;
  background-color: rgba(0, 0, 0, 0.2);
}
.avatar {
  height: 100%;
  display: block;
}
.update-box {
  padding-right: 30px;
}
.config-cell {
  height: 100px;
  width: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 20px;
  padding-left: 20px;
  cursor: pointer;
}
.icon-config {
  display: inline-block;
  height: 80px;
  width: 80px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 80% 80%;
}
.wechat {
  background-image: url(./wechat.png);
}
.alipay {
  background-image: url(./alipay.png);
}
</style>